import React, { useState, useEffect } from 'react'
import { useNavigate } from "react-router-dom"
import { NavBar, Sticky, TextArea, Input, Uploader } from '@nutui/nutui-react'
import { ArrowLeft } from '@nutui/icons-react'
import { Picker, Field,Toast } from 'react-vant'

const columns = [
    '产品体验',
    '产品功能',
    '其他问题',
]

export default function Feedback() {
    const [currentTime, setCurrentTime] = useState(getCurrentTime())
    const [value, setValue] = useState('')
    const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
    let navigate = useNavigate()
    function getCurrentTime() {
        let date = new Date();
        let hours = date.getHours();
        let minutes = date.getMinutes();
        minutes = (minutes < 10 ? '0' : '') + minutes;
        return `${hours}:${minutes}`;
    }

    useEffect(() => {
        const intervalId = setInterval(() => {
            setCurrentTime(getCurrentTime());
        }, 3000);
        return () => clearInterval(intervalId);
    }, []);

    let fk = () => {
        Toast.info({
            message: '感谢您的反馈！',
        })
        navigate("/mine")
    }
    return (
        <div style={{ height: "100vh"}}>
            <Sticky threshold={0} position='top'>
                <div style={{ backgroundColor: "white", width: "100%", height: "46px", lineHeight: "46px", top: 0 }}>
                    <p style={{ float: "left", fontSize: "18px", position: "relative", left: "15px", top: "0px" }}>{currentTime}</p>
                    <span style={{ float: "right", marginRight: "14px", marginTop: "2px" }}>
                        <svg style={{ margin: "0px 2px" }} t="1721620058419" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10971" width="18" height="18"><path d="M0 704h208v192H0zM272 512h208v384H272zM544 288h208v608H544zM816 128h208v768H816z" p-id="10972" fill="#2c2c2c"></path></svg>
                        <svg style={{ margin: "0px 2px" }} t="1721619897930" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2615" width="18" height="18"><path d="M0 352.832l93.12 98.752c231.296-245.44 606.464-245.44 837.76 0L1024 352.832C741.44 53.056 283.008 53.056 0 352.832z m372.352 395.008L512 896l139.648-148.16c-76.8-81.92-202.048-81.92-279.296 0zM186.24 550.4l93.12 98.752c128.448-136.32 336.96-136.32 465.408 0L837.824 550.4c-179.648-190.592-471.488-190.592-651.648 0z" fill="#000000" p-id="2616"></path></svg>
                        <svg style={{ position: "relative", top: "2px" }} t="1721620142022" className="icon newdc" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12310" width="25" height="25"><path d="M167.4 374.1h620.3v275.7H167.4z" p-id="12311" fill="#2c2c2c"></path><path d="M930.1 408.6H891V305.2c0-19-15.5-34.5-34.5-34.5h-758c-18.9 0-34.5 15.5-34.5 34.5v413.5c0 18.9 15.5 34.5 34.5 34.5h758.2c18.9 0 34.5-15.5 34.5-34.5V615.4h39.1c16.5 0 29.9-13.4 29.9-29.9v-147c-0.2-16.4-13.6-29.9-30.1-29.9zM822.2 684.3H132.9V339.7h689.2v344.6z" p-id="12312" fill="#2c2c2c"></path></svg>
                    </span>
                </div>
                <div style={{ position: "relative", top: -10, }}>
                    <div style={{ width: "414px" }}>
                        <NavBar style={{ width: "100%", marginTop: "-50px", backgroundColor: "white", }}
                            titleAlign="left"
                            back={<ArrowLeft />}
                            onBackClick={() => { navigate(-1) }}>
                            <div>意见反馈</div>
                        </NavBar>
                    </div>
                </div>
            </Sticky>
            <hr style={{ marginTop: "-30px",marginBottom:"20px" }}></hr>
            <div>
                <div style={{ marginTop: "20px", border: "1px solid #E4E4E4", width: "380px", margin: "0 auto" }}>
                    <Picker
                        popup={{
                            round: true,
                        }}
                        value={value}
                        columns={columns}
                        onConfirm={setValue}
                    >
                        {(val, _, actions) => {
                            return (
                                <Field
                                    readOnly
                                    clickable
                                    label='选择反馈类型'
                                    value={val || ''}
                                    onClick={() => actions.open()}
                                />
                            )
                        }}
                    </Picker>
                </div>
                <div style={{ border: "1px solid #E4E4E4", width: "380px", margin: "0 auto", marginTop: "10px" }}>
                    <TextArea style={{ height: "200px" }} showCount maxLength={300} placeholder='请输入反馈信息' />
                </div>
                <div style={{ border: "1px solid #E4E4E4", width: "380px", margin: "0 auto", marginTop: "10px" }}>
                    <Input placeholder="手机/邮箱/QQ（选填）" />
                </div>
                <div style={{ width: "380px", margin: "0 auto", marginTop: "30px" }}>
                    <div style={{ marginBottom: "25px", color: "#CCCCCC" }}>上传图片（最多6张）</div>
                    <Uploader url={uploadUrl} multiple maxCount="6" />
                </div>
                <div style={{ textAlign: "center", marginTop: "60px" }}>
                    <button style={{ width: "380px", height: "50px", border: "none", borderRadius: "5px", backgroundColor: "#108EE9", color: "#fff", fontSize: "18px" }} onClick={fk}>提交</button>
                </div>
            </div>
        </div>
    )
}
